import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 引入eventbus
import bus from "./utils/bus";
Vue.prototype.$bus = bus;
// 引入全局css和element-rest
import "@/assets/styles/base.css";
import "@/assets/styles/el.reset.css";
// 引入iconfont
import "./assets/iconfont/iconfont.css";
// 引入subMenu组件
import qfsubMenu from "qf-sub-menu";
Vue.use(qfsubMenu); //将组件注册到全局
// 引入nprogress进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";

// 全局引入element-ui
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

Vue.config.productionTip = false;

// 引入鉴权的方法
import has from "./utils/has"
Vue.prototype.$has = has;
// 定义全局自定义指令，判断是否具备相应权限
Vue.directive("haspermission",{
  bind(el,binding,VNode){
    // console.log(el);
    // console.log(binding);
    let buttons = localStorage.getItem("permission-buttons")
    if(!has(buttons,binding.value)){
      // 没有权限 =》 禁用
      // evement-ui的按钮禁用 =》先储存class类名 在这基础上加上is-disabled禁用按钮
      let className = el.className;
      el.className = className +" "+"is-disabled"
      el.disabled = true
    }
  }
})

// // 按需引入(轮播图)
// import { Carousel,CarouselItem} from 'element-ui';
// // 注册
// Vue.component('el-carousel', Carousel);
// Vue.component('el-carousel-item', CarouselItem);

// 路由前置钩子（导航守卫/路由守卫）
router.beforeEach((to, from, next) => {
  NProgress.start();
  // 用户登入之后，localstorage中有token
  let token = localStorage.getItem("login-token") || null;
  if (token) {
    // 如果是注册页面或者是登入页面，直接放行
    if (store.state.menuList.length == 0) {
      // 说明没有用户路由，触发action获取用户路由
      store.dispatch("FETCH_MENULIST").then(() => {
        /* 
          这里要注意，next里面要传参数即要进入的页面的路由信息，
          因为next传参数后，当前要进入的路由会被废止，转而进入参数对应的路由，
          虽然是同一个路由，这么做主要是为了确保addRoutes生效了。
        */
        next({ path: to.path });
      });
    } else {
      next();
    }
  } else {
    //没有token
    if (to.path === "/login") {
      next();
    } else {
      //访问的不是登入页，就要跳转到登入页
      next({ path: "/login" });
    }
  }
});

// 使用路由后置钩子处理面包屑
router.afterEach((to, from) => {
  NProgress.done();
  let crumblist = to.matched.slice(1);
  // console.log(crumblist);
  store.commit("SET_CRUMBS", crumblist);
});

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
